<template>
  <a-layout id="main-layout">
    <a-layout-header class="header">
      <div class="logo">
        <img src="@/assets/img/logo.svg" alt="">
      </div>
      <a-menu
        theme="dark"
        mode="horizontal"
        :default-selected-keys="['1']"
        class="header-menu"
      >
        <a-menu-item key="1">
          <span>首页</span>
        </a-menu-item>
        <a-menu-item key="2">
          <span>知识中心</span>
        </a-menu-item>
        <a-menu-item key="3">
          <span>对象管理</span>
        </a-menu-item>
        <a-menu-item key="4">
          <span>系统设置</span>
        </a-menu-item>
      </a-menu>
    </a-layout-header>
    <a-layout>

    </a-layout>
  </a-layout>
</template>

<script>
import Menu from '../components/layout/Menu';
import Header from '../components/layout/Header';

export default {
  components: {
    Menu,
    Header
  },
  watch: {
    // /**
    //  * 监听路由的改变,设置菜单选中
    //  * @param e
    //  */
    // $route(e) {
    //   // 设置菜单选中
    //   this.$refs.menu.chooseMenu(e);
    // }
  },
  data() {
    return {
      selectedKeys: [],
      collapsed: false,
      openKeys: [],
      globalLoading: false,
      globalLoadingTip: null,

      sideMenuTheme: "light",
    }
  },
  methods: {
    chooseProfile(e) {
      this.$refs.route && this.$refs.route.chooseProfile && this.$refs.route.chooseProfile(e)
    },
    onHeaderEvent(e) {
      this.$refs.route && this.$refs.route.onHeaderEvent && this.$refs.route.onHeaderEvent(e)
    },
  },
  beforeCreate() {

  }
}
</script>

<style lang="scss" scoped>
#main-layout {
  height: 100%;
}

#main-layout .logo {
  width: 90px;
  text-align: center;
  line-height: 49px;
}

.header {
  padding: 0;
  height: 49px;
  display: flex;
}

.header-menu {
  line-height: 49px;
}


</style>

